<template>
  <div class="container">
    <div class="title">
      <span class="title-cancle" @click="visible = false"> x 

      </span>
    </div> 
    <div class="form">
        <div class="form-item"> 
          <div class="label">文章ID</div>
          <input class="ipt" v-model="formData.id"/>
        </div>
                <div class="form-item"> 
          <div class="label">文章标题</div>
          <input class="ipt" v-model="formData.title"/>
        </div>
                <div class="form-item"> 
          <div class="label">文章标签</div>
          <input class="ipt" v-model="formData.label"/>
        </div>
                <div class="form-item"> 
          <div class="label">作者</div>
          <input class="ipt" v-model="formData.author"/>
        </div>
        <div class="footer">
          <button class="confirm-btn" @click="confirm">确认</button>
        </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      visible:false,
      formData:{
        id:"",
        title:"",
        label:"",
        author:"",
      },
    };
  },
  methods:{
    confirm(){
      this.$emit("confirm",this.formData);
      this.visible=false;
    },
  },
  
};
</script>


<style scoped>
.title {
  height: 50px;
  line-height: 50px;
  background: #001528;
  color: #fff;
  text-align: center;
}

.title-cancle {
  margin-right: 10px;
  cursor: pointer;
}
.form {
  padding: 20px;
}
.form-item {
  display: flex;
  height: 40px;
  line-height: 40px;
  margin-bottom: 20px;
}
.label {
  width: 100px;
}

.footer {
  text-align: right;
  padding: 10px;
}
.mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ccc;
  opacity: 0.5;
  z-index: 10;
}
</style>